<template>
  <div class="my-counter">
    <button type="button" class="btn btn-light" @click="reduce">-</button> 
    <input type="number" class="form-control inp"  v-model="count">  <!-- 此处的count双向绑定App.vue中的good_count  -->
    <button type="button" class="btn btn-light" @click="add">+</button>
  </div>
 
</template>

<script>

export default {
   props:['count','index'],
   methods: {
      add() {
        this.$emit('add', this.index,1);
      },
      reduce() {
        this.$emit('reduce', this.index,1);
      }
   }
    
}
</script>

<style lang="less" scoped>
.my-counter {
  display: flex;
  .inp {
    width: 45px;
    text-align: center;
    margin: 0 10px;
  }
  .btn, .inp{
    transform: scale(0.9);
  }
}
</style>